<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
//Api工具类
import * as apiUtil from "@/api/ApiUtils"
//Api接口和类
import {SysContentVO,apiSave,apiGetDetail} from "@/api/SysContentApi";
import {SysDictVO, apiTree} from "@/api/SysDictApi"


import {MdEditor, MdPreview, MdCatalog} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

// Props 和 Emits
const props = defineProps<{
  dataId: number | null
}>();

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'successed'): void
}>();

/**
 * 表单数据
 */
const formData = ref<SysContentVO>(new SysContentVO())
const treeOption = ref<SysDictVO[]>([]);

const handleTreeChange = (value,label)=>{
  formData.value.groupName = label[0] ;
}

/**
 * 数据验证规则
 */
const rules = {
 title:[{ required: true, message: '标题必填!' }],
 content:[{ required: true, message: '内容必填!' }],
}

/**
 * 操作类型
 */
const actionType = computed(() => {
  return props.dataId ? "修改" : "添加"
})

/**
 * 页面加载后执行的钩子函数
 */
onMounted(() => {
  apiTree("Document").then(res=>{
    if(apiUtil.isSuccessed(res)){
      treeOption.value = res.data;

      if (props.dataId) {
        handleGetDetail();
      } else {
        formData.value = new SysContentVO();
      }
    }
  });

})

/**
 * 保存数据
 */
const handleSave = async () => {
  try {
    const res = await apiSave(formData.value)
    if (apiUtil.isSuccessed(res)) {
      emit('successed');
      emit('close');
      apiUtil.notifySuccess(actionType.value + "成功");
    }
  } catch (error) {
    emit('close');
    apiUtil.notifyError('提交失败',error.message);
  }
}

/**
 * 查询详情
 */
const handleGetDetail = async () => {
  if (!props.dataId) return;
  try {
    const res = await apiGetDetail(props.dataId)
    if (apiUtil.isSuccessed(res)) {
      // 保留响应式连接的更新方式
      formData.value = res.data;
    }
  } catch (error) {
    apiUtil.notifyError('查询失败',error.message);
  }
}
</script>

<template>
  <div class="padding-20">
    <div>
      <a-form
          :model="formData"
          name="basic"
          autocomplete="off"
          @finish="handleSave"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label='标题'  name='title' :rules='rules.title' >
              <a-input v-model:value='formData.title' />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label='分组'  name='groupId' >
              <a-tree-select
                  v-model:value="formData.groupId"
                  :tree-data="treeOption"
                  :fieldNames = "{value:'id'}"
                  @change="handleTreeChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label='标签'  name='tags' >
              <a-input v-model:value='formData.tags' />
            </a-form-item>
          </a-col>
          <a-col :span="4" class="text-right">
            <a-button type="primary" html-type="submit">提交</a-button>
            <a-button class="margin-left-20" @click="emit('close')">取消</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>


    <div>
      <MdEditor
          class="mdEditor"
          editorId="sysContentMdEditor"
          autoFoldThreshold="10000"
          showToolbarName="true"
          v-model="formData.content"  />
    </div>
  </div>

</template>

<style scoped>
.mdEditor{
  height: 80vh;
}
</style>